<script></script>

<template>
  <div class="pagination">
    <!-- 必须显示的添加:v-model -->
    <el-pagination
      v-model:current-page="pageModel.pageNo"
      v-model:page-size="pageModel.pageSize"
      :page-sizes="props.paginationSizeList"
      :total="resultModel.total"
      layout="total, sizes, prev, pager, next, jumper"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script setup>
import { ref, defineModel } from "vue";
const emit = defineEmits(["getPage", "debug"]);
// 请求参数
const pageModel = defineModel("pageModel");
// 请求结果
const resultModel = defineModel("resultModel");

const props = defineProps({
  paginationSizeList: {
    type: Array,
    default: [5, 10, 20, 50],
  },
  disabled: {
    type: Boolean,
    default: false,
  },
});

const handleSizeChange = () => {
  emit("getPage");
};

const handleCurrentChange = () => {
  emit("getPage");
};
</script>

<style lang="scss" scoped>
.pagination {
  margin-top: 5px;
  margin-bottom: 5px;

  display: flex;
  justify-content: center;
}
</style>
